﻿<!DOCTYPE html>
<!-- 
/////////////////////////////////////////////////////////////////////////////////////////////////


		   _ _   _       _   _   _ _______            _      
		  | (_) (_)     | | (_) (_)__   __|          | |     
		  | | ___  _ __ | | _____    | |_ __ __ _  __| | ___ 
	  _   | |/ _ \| '_ \| |/ / _ \   | | '__/ _` |/ _` |/ _ \
	 | |__| | (_) | | | |   < (_) |  | | | | (_| | (_| |  __/
	  \____/ \___/|_| |_|_|\_\___/   |_|_|  \__,_|\__,_|\___|
															 
		APPLIED WEB ARCHITECTURE - GROUP PROJECT ASSIGNEMENT
	
	LEAD DEVELOPPER		Jalil BENAYACHI
	LIVE DEMO			http://thejals.com/projects/jonkotrade/
	GOOGLE PROJECT		https://code.google.com/p/jonkotrade/
	LICENSE				(after PingPong release:) MIT Open-source License
	
	ABOUT THE PROJECT	/ 	CREDITS
	=	STOCK PHOTOS
		Since it's a marketing website project, we had to use stock photos to illustrate
		the different contents. Both are coming from a royalty-free image db websites,
		such as http://www.dreamstime.com/free-photos 
		
	= 	LAYOUT	
		Some of the layout CSS comes from third-party developers, shared open-source.
		Same about the Javascript: jQuerry and animations libraries were used.
		The main HTML was adapted from a previous project of mine, a Wordpress-like
		CMS which I didn't finally released.
		Instead Bootstrap I used WWW.GETSKELETON.COM to make the website responsive.
		
	=	PHP / SQL
		All the PHP and SQL was made from start to scratch after studying the project
		description and creating a list of features the website has to be able to do.
		Some were added during the development process.
		
	= 	HOSTING
		Since the PHP is server side, the project was developed using uWamp Server 
		(Similar to WAMP SERVER) for local-dev and live demo is hosted on my personal
		virtual private server (VPS) that I turned into an Apache2, PHP, mySQL (LAMP)
		server. It is ran by Ubuntu 14.04 LTS and hosted in OVH.fr's Roubaix Datacenters, FRANCE.

	=	SUBVERSION
		Because it is a group project, we used a subversion server (Hosted by Google Projects)
		with TortoiseSVN windows client. The Subversion's server address can be found on the 
		Google project page.
	
	LET'S PUT SOME CODE DOWN THERE NOW
/////////////////////////////////////////////////////////////////////////////////////////////////
 -->
<?php 
$page="home";
include_once('includes/header.inc.php');
    ?>



	<section id="home" class="home boxed">
		<div class="container">
			
			<!-- Text -->
			<div class="eight columns">
				<h1 class="title">The <span class="title-highlight">local</span> way to trade your stuff and services.</h1>
				
				<div class="subtitle">
					<p class="small">
						It's here, and it's called Jönkötrade. Made for Jönköping citizens.
					</p>
					<p style="font-family: Roboto Slab; font-weight: 300;">
						Trading in Jönköping has never been so safe, fast and easy. Just browse the products and services and 
						buy whatever you need for the cheapest prices ever. Or publish your own announcement and get the things you
						wanted to get rid of as fast as it takes to say "Jönkötrade".
					</p>
				</div> <!-- /.subtitle -->

				<a href="products" class="button brows-button">Browse products</a> or <a href="publish" class="button brows-button">Publish an announcement</a>
			</div><!-- /.eight columns -->

			<!-- Image -->
			<div class="eight columns" align="right">
				<i class="fa fa-users" style="font-size: 22em;" ></i>
				
			</div><!-- /.eight columns -->

		</div> <!-- /.container -->
	</section> <!-- #home -->
	




	<section id="cta" class="cta boxed">
		<div class="container">

			<span class="cta-txt">Create an account. It's free !</span>
			<a href="account/" class="button purchase-button">Alright ! <span>Let's do this</span></a>

		</div> <!-- /.container -->
	</section> <!-- #cta -->







	<section id="features" class="features boxed">

		<div class="section-header">
			<h3 class="title">What will you <span class="title-highlight">earn</span> ?</h3>

			<p class="description">
				Let us explain the pros of using Jönkötrade to buy and sell stuff
			</p>
		</div> <!-- /.section-header -->

				<div class="feature opacity-zero">
			<div class="container">

				<div class="sixteen columns">

					<div class="feature-icon"><i class="fa fa-clock-o"></i></div>

					<div class="feature-title">Save your Time</div>

					<div class="feature-description">
						You don't have to move to the local supermarkets and pin your announcements on the paperboards.
						Just publish your announcement here and the whole town will be aware of it. It won't take much time to sell your items.
					</div> <!-- /.feature-description -->
				
				</div> <!-- /.sixteen columns -->

			</div> <!-- /.container -->
		</div> <!-- /.feature -->
		
				<div class="feature opacity-zero">
			<div class="container">

				<div class="sixteen columns">
					<div class="feature-icon"><i class="fa fa-slideshare"></i></div>
				
					<div class="feature-title">Human Contact</div>
				
					<div class="feature-description">
						In this digital world were everything is anonymous and just shipped to your place, Jönkötrade decided to keep it old school. 
						It's web, but, still, it's local. Buyers and customers still have to meet together and that creates new social links in town.
					</div> <!-- /.feature-description -->

				</div> <!-- /.sixteen columns -->
				
			</div> <!-- /.container -->
		</div> <!-- /.feature -->

		
		<div class="feature opacity-zero">
			<div class="container">

				<div class="sixteen columns">

					<div class="feature-icon"><i class="fa fa-cc-paypal"></i></div>
				
					<div class="feature-title">Safe for buyers</div>
				
					<div class="feature-description">
						Jönkötrading is safe. As a buyer, you can pay online via Paypal. You won't be charged immediately.
						Jönkötrade gives you a passcode you will give to the seller once you meet him and get the product.
					</div> <!-- /.feature-description -->

				</div> <!-- /.sixteen columns -->

			</div> <!-- /.container -->
		</div> <!-- /.feature -->

		<div class="feature opacity-zero">
			<div class="container">

				<div class="sixteen columns">
					<div class="feature-icon"><i class="fa fa-check-square-o"></i></div>
				
					<div class="feature-title">Safe for sellers</div>
				
					<div class="feature-description">
						As a seller, all you have to do is to type the passcode the buyer gives you during the meeting on your personnal
						pannel. The customer will be charged, and the money wired to your paypal account. 
					</div> <!-- /.feature-description -->

				</div> <!-- /.sixteen columns -->
				
			</div> <!-- /.container -->
		</div> <!-- /.feature -->



	</section> <!-- #features -->






	<section id="overview" class="overview boxed">

		<div class="section-header">
			<h3 class="title"><span class="title-highlight">Latests</span> Products & Services </h3>

			<p class="description">
				Find out the latest products and services published by citizens around you. Or <a href="browse">browse all the products</a>.
			</p>
		</div> <!-- /.section-header -->


		<div class="container">

			<div class="sixteen columns">
				<div class="sellingitem-block opacity-zero">
					<h4 class="sellingitem-no">sellingitem One</h4>

					<div class="sellingitem-preview-img">
						<a href=""><img src="data/img/sample-sellingitem.png" alt="Sample sellingitem"></a>
					</div> <!-- /.sellingitem-preview-img -->

					<h5 class="sellingitem-title">How to Use Jonkotrade</h5>

					<p>Lorem ipsum dolor sit amet, has persius detraxit ea. Eu duis 
complectitur mei, corpora interesset quaerendum no nec, ius vidit consul
 graeci in.</p>
				</div> <!-- /.sellingitem-block -->
				

				<div class="sellingitem-block opacity-zero">
					<h4 class="sellingitem-no">sellingitem Two</h4>

					<div class="sellingitem-preview-img">
						<a href=""><img src="data/img/sample-sellingitem.png" alt="Sample sellingitem"></a>
					</div> <!-- /.sellingitem-preview-img -->

					<h5 class="sellingitem-title">How to Use Jonkotrade</h5>

					<p>Lorem ipsum dolor sit amet, has persius detraxit ea. Eu duis 
complectitur mei, corpora interesset quaerendum no nec, ius vidit consul
 graeci in.</p>
				</div> <!-- /.sellingitem-block -->
				

					<div class="sellingitem-block opacity-zero">		
					<h4 class="sellingitem-no">sellingitem Three</h4>

					<div class="sellingitem-preview-img">
						<a href=""><img src="data/img/sample-sellingitem.png" alt="Sample sellingitem"></a>
					</div> <!-- /.sellingitem-preview-img -->

					<h5 class="sellingitem-title">How to Use Jonkotrade</h5>

					<p>Lorem ipsum dolor sit amet, has persius detraxit ea. Eu duis 
complectitur mei, corpora interesset quaerendum no nec, ius vidit consul
 graeci in.</p>
				</div> <!-- /.sellingitem-block -->
				

				<div class="sellingitem-block opacity-zero">
					<h4 class="sellingitem-no">sellingitem Four</h4>

					<div class="sellingitem-preview-img">
						<a href=""><img src="data/img/sample-sellingitem.png" alt="Sample sellingitem"></a>
					</div> <!-- /.sellingitem-preview-img -->

					<h5 class="sellingitem-title">How to Use Jonkotrade</h5>

					<p>Lorem ipsum dolor sit amet, has persius detraxit ea. Eu duis 
complectitur mei, corpora interesset quaerendum no nec, ius vidit consul
 graeci in.</p>
				</div> <!-- /.sellingitem-block -->
				

					<div class="sellingitem-block opacity-zero">		
					<h4 class="sellingitem-no">sellingitem Five</h4>

					<div class="sellingitem-preview-img">
						<a href=""><img src="data/img/sample-sellingitem.png" alt="Sample sellingitem"></a>
					</div> <!-- /.sellingitem-preview-img -->

					<h5 class="sellingitem-title">How to Use Jonkotrade</h5>

					<p>Lorem ipsum dolor sit amet, has persius detraxit ea. Eu duis 
complectitur mei, corpora interesset quaerendum no nec, ius vidit consul
 graeci in.</p>
				</div> <!-- /.sellingitem-block -->
				

				<div class="sellingitem-block opacity-zero">
					<h4 class="sellingitem-no">sellingitem Six</h4>

					<div class="sellingitem-preview-img">
						<a href=""><img src="data/img/sample-sellingitem.png" alt="Sample sellingitem"></a>
					</div> <!-- /.sellingitem-preview-img -->

					<h5 class="sellingitem-title">How to Use Jonkotrade</h5>

					<p>Lorem ipsum dolor sit amet, has persius detraxit ea. Eu duis 
complectitur mei, corpora interesset quaerendum no nec, ius vidit consul
 graeci in.</p>
				</div> <!-- /.sellingitem-block -->
				

					<div class="sellingitem-block opacity-zero">		
					<h4 class="sellingitem-no">sellingitem Seven</h4>

					<div class="sellingitem-preview-img">
						<a href=""><img src="data/img/sample-sellingitem.png" alt="Sample sellingitem"></a>
					</div> <!-- /.sellingitem-preview-img -->

					<h5 class="sellingitem-title">How to Use Jonkotrade</h5>

					<p>Lorem ipsum dolor sit amet, has persius detraxit ea. Eu duis 
complectitur mei, corpora interesset quaerendum no nec, ius vidit consul
 graeci in.</p>
				</div> <!-- /.sellingitem-block -->
				

				<div class="sellingitem-block opacity-zero">
					<h4 class="sellingitem-no">sellingitem Eight</h4>

					<div class="sellingitem-preview-img">
						<a href=""><img src="data/img/sample-sellingitem.png" alt="Sample sellingitem"></a>
					</div> <!-- /.sellingitem-preview-img -->

					<h5 class="sellingitem-title">How to Use Jonkotrade</h5>

					<p>Lorem ipsum dolor sit amet, has persius detraxit ea. Eu duis 
complectitur mei, corpora interesset quaerendum no nec, ius vidit consul
 graeci in.</p>
				</div> <!-- /.sellingitem-block -->

			</div> <!--- /.sixteen columns -->

			
		

	</section> <!-- #overview -->




	<section id="cta" class="cta boxed">
		<div class="container">

			<span class="cta-txt">Want to browse all the items ?</span>
			<a href="#purchase" class="button purchase-button">Browse all products</a>

		</div> <!-- /.container -->
	</section> <!-- #cta -->




	<section id="testimonials" class="testimonials boxed">

		<div class="section-header">
			<h3 class="title">The <span class="title-highlight">Testimonials</span></h3>

			<p class="description">
				Many people have used Jönkötrade since its beta-test period started. Maybe a few testimonials will convince you to do so !
			</p>
		</div> <!-- /.section-header -->
		
		<div class="testimonial opacity-zero">
			<div class="container">
				<div class="three columns">
					<img src="data/img/testimonial-avatar-1.png" alt="Lidia Coffelt">	
				</div>

				<div class="thirteen columns">
					<div class="profile">
						<span class="name">Random Brunette Girl</span>
						
						<div class="ratings">
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
							<i class="fa fa-star-half-empty"></i>
						</div> <!-- /.ratings -->

						<p><strong>Just awesome.</strong> As an international student that just arrived in Jönköping, I needed some furnitures and kitchen accessories
						to set up my appartment with a small amount of money. I found that announcement of a student leaving and selling a few things, and I managed
						to get those in less than 48hours ! Love it.</p>
					</div> <!-- /.profile -->
				</div>
			</div> <!-- /.container -->
		</div> <!-- /.testimonial -->
		
		<div class="testimonial opacity-zero">
			<div class="container">

				<div class="thirteen columns">
					<div class="profile">
						<span class="name">Bold Guy</span>
						
						<div class="ratings">
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
							<i class="fa fa-star"></i>
						</div> <!-- /.ratings -->

						<p><strong>Amazing!</strong> I bought a new fridge at the store and I didn't knew what to do with my small, old one. I published an announcement and someone wanted to buy it a few hours later. The next day we set up a meeting next to his place and that was it. As simple as it is to say Jönkötrade !</p>
					</div> <!-- /.profile -->
				</div>

				<div class="three columns">
					<img src="data/img/testimonial-avatar-2.png" alt="Lidia Coffelt">	
				</div>

			</div> <!-- /.container -->
		</div> <!-- /.testimonial -->


	</section> <!-- #testimonials -->





	<section id="author" class="author boxed" >

		<div class="section-header">
			<h3 class="purchase title">About <span class="title-highlight">Us</span></h3>

			<p class="description">
				Since you'll probably use our website to trade your items, we should know each others.<br/>
				The Jönkötrade project was first of all imagined and realized for a group project assignement in Jönköping University's School of Engineering (JTH).<br>
				It was made by international master engineering students from ECE Paris Engineering School (FRANCE), under the JTH laboration supervision of
				"Applied Web Architecture" Professor's Erik Gunnarsson.<br/>
				
			</p>
		</div> <!-- /.section-header -->
	</section> <!-- #author -->








	<section id="contact" class="contact boxed">

		<div class="section-header">
			<h3 class="title"><span class="title-highlight">Contact</span> Us</h3>

			<p class="description">
				If you want to know more about the project, feel free to send us an e-mail. Don't use this form to post an announcement: it's not the point, and we won't post it for you. Use your user pannel for that.
			</p>
		</div> <!-- /.section-header -->

		<div class="container">
			<div class="twelve columns offset-by-two">
				
				<form novalidate="novalidate" method="post" action="p" id="contact-form" class="contact-form">
					<input name="name" id="name" placeholder="Enter your name..." type="text">

					<input name="email" id="email" placeholder="Enter your email..." type="email">

					<textarea name="message" id="message" placeholder="Enter your message..."></textarea>

					<input value="Send!" class="button" type="submit">
				</form>

			</div>
		</div> <!-- /.container -->
	</section> <!-- #contact -->




<?php include_once('includes/footer.inc.php'); ?>